<template>
	<view class="interaction-container">
		<!-- 头部区域 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">互动消息</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">{{ total }}条消息</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 消息列表 -->
		<view class="message-list-container">
			<view v-if="countInfo.length > 0" class="message-list">
				<view v-for="message in countInfo" :key="message._id" class="message-item"
					:class="{'unread': !message.isRead}" @click="lookInfo(message)">
					<!-- 未读标识 -->
					<view class="unread-indicator" v-if="!message.isRead">
						<view class="unread-dot"></view>
					</view>

					<!-- 消息图标 -->
					<view class="message-icon">
						<view class="icon-wrapper" :class="'icon-' + message.type">
							<text class="icon-text">{{ getMessageIcon(message.type) }}</text>
						</view>
					</view>

					<!-- 消息内容 -->
					<view class="message-content">
						<view class="message-header">
							<view class="message-type">
								<text class="type-text">{{ getPostsType(message.type) }}</text>
							</view>
							<view class="message-time">
								<text class="time-text">{{ formatDate(message.createdAt) }}</text>
							</view>
						</view>

						<view class="message-body">
							<text class="content-text">{{ message.content }}</text>
						</view>
					</view>

					<!-- 箭头指示 -->
					<view class="arrow-indicator">
						<text class="arrow-icon">›</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-else class="empty-state">
				<view class="empty-icon">📬</view>
				<text class="empty-title">暂无消息</text>
				<text class="empty-desc">您还没有收到任何互动消息</text>
			</view>

			<!-- 加载更多 -->
			<view v-if="countInfo.length > 0 && countInfo.length < total" class="load-more">
				<text class="load-text">上拉加载更多</text>
			</view>

			<!-- 没有更多数据 -->
			<view v-if="countInfo.length > 0 && countInfo.length >= total" class="no-more">
				<text class="no-more-text">没有更多消息了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import config from '@/config/config';
	import {
		notificationList,
		readNotification
	} from "@/api/members.js"
	import {
		getCircleInfo,
	} from '@/api/circle.js'

	export default {
		components: {
			headerSlot,
		},

		data() {
			return {
				config,
				noMoreData: false,
				countInfo: [],
				page: {
					page: 1,
					limit: 20
				},
				total: 0
			}
		},
		onShow() {
			this.countInfo = []
			this.getNotificationList()
		},
		onPullDownRefresh() {
			this.countInfo = []
			this.page = {
				page: 1,
				limit: 20
			}
			this.getNotificationList()
		},
		// 页面滚动到底部时触发（需在pages.json配置）
		onReachBottom() {
			if (this.countInfo.length < this.total && this.countInfo.length > 0) {
				this.page.page++
				this.getNotificationList()
			}
		},
		methods: {
			getNotificationList() {
				notificationList(this.page).then(res => {
					uni.showLoading({
						mask: true,
						title: "加载中..."
					})
					if (this.countInfo.length > 0) {
						this.countInfo = [...this.countInfo, ...res.data.data.list]
					} else {
						this.countInfo = res.data.data.list
					}
					uni.hideLoading()
					this.total = res.data.data.pagination.total
					uni.stopPullDownRefresh()
				}).catch(err => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				})
			},
			//查看详情
			lookInfo(message) {
				if (message.isRead) {
					this.routeType(message)
					return
				}
				readNotification(message._id).then(res => {
					// 更新本地状态
					this.countInfo.forEach(item => {
						if (item._id === message._id) {
							item.isRead = true
						}
					})
					this.routeType(message)
				})
			},
			routeType(message) {
				switch (message.type) {
					case "comment":
					case "comment_reply":
					case "comment_like":
						this.$router.smartNavigate({
							url: `/pages/circlePages/circleInfo?id=${message.refId}`
						})
						break;
					case "like":
						this.$router.smartNavigate({
							url: `/pages/circlePages/circleInfo?id=${message.refId}`
						})
						break;
					case "complaint":
					case "complaint_reply":
						this.$router.smartNavigate({
							url: `/pages/mePages/WorkOrderDetails`
						})
						break;
					case "order":
					case "repair_order":
					case "cleaning_order":
						// 根据订单类型跳转到不同的页面
						if (message.type === 'repair_order') {
							this.$router.smartNavigate({
								url: `/pages/homePages/repairOrderHistory`
							})
						} else if (message.type === 'cleaning_order') {
							this.$router.smartNavigate({
								url: `/pages/homePages/cleaningOrderHistory`
							})
						} else {
							this.$router.smartNavigate({
								url: `/pages/homePages/orderInfo?id=${message.refId}`
							})
						}
						break;
					case "product_order":
						this.$router.smartNavigate({
							url: `/pages/mePages/orderCenter/index`
						})
						break;
					case "product_order_delivered":
						// 商品订单已送达通知，跳转到订单中心
						this.$router.smartNavigate({
							url: `/pages/mePages/orderCenter/index`
						})
						break;
					case "shop_order":
						this.$router.smartNavigate({
							url: `/pages/mePages/shopCenter/index`
						})
						break;
					case "newOrder":
						// 新订单通知跳转到商家中心
						this.$router.smartNavigate({
							url: `/pages/mePages/shopCenter/index`
						})
						break;
					case "commission_income":
						this.$router.smartNavigate({
							url: `/pages/mePages/balance/index`
						})
						break;
						// 提现相关通知跳转
					case "withdraw_approved":
					case "withdraw_rejected":
					case "withdraw_transfer_initiated":
					case "withdraw_success":
					case "withdraw_failed":
					case "withdraw_unconfirmed_reminder":
					case "withdraw_confirmed":
					case "withdraw_batch_confirmed":
					case "withdraw_cancelled":
					case "withdraw_retried":
						// 如果有具体的提现记录ID，跳转到详情页
						if (message.refId) {
							this.$router.smartNavigate({
								url: `/pages/mePages/balance/WithdrawDetail?id=${message.refId}`
							})
						} else {
							// 否则跳转到提现记录列表页
							this.$router.smartNavigate({
								url: `/pages/mePages/balance/WithdrawRecords`
							})
						}
						break;
					case "auth_result":
						this.$router.smartNavigate({
							url: `/pages/mePages/certifiedOwners`
						})
						break;
					case "post_audit":
						this.$router.smartNavigate({
							url: `/pages/circlePages/circleInfo?id=${message.refId}`
						})
						break;
					default:
						// 默认情况下只标记为已读
						break;
				}
			},
			closePage() {
				uni.navigateBack()
			},
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			},
			getPostsType(type) {
				const postsTypes = {
					'comment': '评论',
					'comment_reply': '评论回复',
					"like": '点赞',
					"comment_like": '评论点赞',
					"order": '订单通知',
					"product_order": '商品订单通知',
					"product_order_delivered": '商品订单已送达',
					"shop_order": '商家订单通知',
					"repair_order": '维修订单通知',
					"cleaning_order": '保洁订单通知',
					"newOrder": '新订单通知',
					"commission_income": '佣金收入通知',
					// 提现相关通知
					"withdraw_approved": '提现审核通过',
					"withdraw_rejected": '提现审核拒绝',
					"withdraw_transfer_initiated": '转账已发起',
					"withdraw_success": '提现成功',
					"withdraw_failed": '提现失败',
					"withdraw_unconfirmed_reminder": '未确认收款提醒',
					"withdraw_confirmed": '确认收款成功',
					"withdraw_batch_confirmed": '批量确认收款',
					"withdraw_cancelled": '提现已取消',
					"withdraw_retried": '提现重新申请',
					"complaint": "工单通知",
					"complaint_reply": "工单回复通知",
					"auth_result": "认证审核通知",
					"post_audit": "帖子审核通知",
					"other": "其他"
				};
				return postsTypes[type] || '未知类型';
			},
			getMessageIcon(type) {
				const icons = {
					'comment': '💬',
					'comment_reply': '💬',
					"like": '👍',
					"comment_like": '👍',
					"order": '📦',
					"product_order": '🛍️',
					"product_order_delivered": '✅',
					"shop_order": '🏪',
					"repair_order": '🔧',
					"cleaning_order": '🧹',
					"newOrder": '🛒',
					"commission_income": '💰',
					// 提现相关通知图标
					"withdraw_approved": '✅',
					"withdraw_rejected": '❌',
					"withdraw_transfer_initiated": '💳',
					"withdraw_success": '🎉',
					"withdraw_failed": '⚠️',
					"withdraw_unconfirmed_reminder": '⏰',
					"withdraw_confirmed": '✅',
					"withdraw_batch_confirmed": '📋',
					"withdraw_cancelled": '🚫',
					"withdraw_retried": '🔄',
					"complaint": "🔧",
					"complaint_reply": "💬",
					"auth_result": "🆔",
					"post_audit": "📝",
					"other": "📢"
				};
				return icons[type] || '📢';
			},
		},
	}
</script>

<style lang="scss" scoped>
	.interaction-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 1);
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 24rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 消息列表容器
	.message-list-container {
		padding: 24rpx;
	}

	// 消息列表
	.message-list {
		.message-item {
			background: white;
			border-radius: 20rpx;
			margin-bottom: 16rpx;
			padding: 24rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
			position: relative;
			display: flex;
			align-items: flex-start;

			&:active {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
			}

			&.unread {
				border-left: 6rpx solid #FF6B35;
				background: linear-gradient(135deg, #fff 0%, #fff8f6 100%);
			}

			// 未读标识
			.unread-indicator {
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				z-index: 2;

				.unread-dot {
					width: 16rpx;
					height: 16rpx;
					background: #FF4D4F;
					border-radius: 50%;
					box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.4);
				}
			}

			// 消息图标
			.message-icon {
				margin-right: 20rpx;
				flex-shrink: 0;

				.icon-wrapper {
					width: 64rpx;
					height: 64rpx;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);

					&.icon-comment {
						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					}

					&.icon-comment_reply {
						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					}

					&.icon-like {
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					}

					&.icon-comment_like {
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					}

					&.icon-order {
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					}

					&.icon-product_order {
						background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
					}

					&.icon-shop_order {
						background: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);
					}

					&.icon-repair_order {
						background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
					}

					&.icon-cleaning_order {
						background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
					}

					&.icon-newOrder {
						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					}

					&.icon-commission_income {
						background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
					}

					&.icon-withdraw_rejected {
						background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
					}

					&.icon-withdraw_failed {
						background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
					}

					&.icon-withdraw_success {
						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
					}

					&.icon-complaint {
						background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%);
					}

					&.icon-complaint_reply {
						background: linear-gradient(135deg, #faad14 0%, #d48806 100%);
					}

					&.icon-auth_result {
						background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
					}

					&.icon-post_audit {
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
					}

					&.icon-other {
						background: linear-gradient(135deg, #8c8c8c 0%, #595959 100%);
					}

					.icon-text {
						font-size: 28rpx;
						color: white;
					}
				}
			}

			// 消息内容
			.message-content {
				flex: 1;
				min-width: 0;

				.message-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;

					.message-type {
						.type-text {
							font-size: 28rpx;
							font-weight: 700;
							color: #333;
						}
					}

					.message-time {
						.time-text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.message-body {
					.content-text {
						font-size: 28rpx;
						color: #666;
						line-height: 1.5;
						word-break: break-all;
					}
				}
			}

			// 箭头指示
			.arrow-indicator {
				margin-left: 16rpx;
				flex-shrink: 0;
				display: flex;
				align-items: center;

				.arrow-icon {
					font-size: 32rpx;
					color: #ccc;
					font-weight: 300;
				}
			}
		}
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 32rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
		}

		.empty-title {
			font-size: 36rpx;
			color: #666;
			font-weight: 600;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 28rpx;
			color: #999;
		}
	}

	// 加载更多
	.load-more {
		text-align: center;
		padding: 32rpx;

		.load-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	// 没有更多数据
	.no-more {
		text-align: center;
		padding: 32rpx;

		.no-more-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.null_data {
		padding: 32rpx;
	}

	.notice_box {
		padding: 32rpx;
		border-bottom: 1px solid #ccc;
		background-color: #fff;

		.notice_item {
			position: relative;
			width: 100%;
			height: 20px;
		}
	}

	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.message-item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.badge {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
	}

	.message-content {
		margin-left: 20rpx;
	}

	.message-title {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.message-content-text,
	.message-time,
	.message-type {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.message-time {
		margin-top: 8rpx;
		text-align: right;
		font-size: 24rpx;
	}

	.tag-container {
		margin-bottom: 10rpx;
	}

	.tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #fff;
	}

	.tag-comment {
		background-color: #52c41a;
	}

	.tag-like {
		background-color: #1890ff;
	}

	.tag-order {
		background-color: #faad14;
	}

	.tag-other {
		background-color: #fa835b;
	}

	.no-messages {
		text-align: center;
		margin-top: 50rpx;
		color: #888;
		font-size: 32rpx;
	}
</style>